<!--
 * @Author: your name
 * @Date: 2020-01-16 13:58:29
 * @LastEditTime : 2020-02-13 16:52:47
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /cross-bh5/vuepages/src/pages/memberStoredDataStatistics/popupPrompt.vue
 -->
<template>
  <span class=" icon iconPosition">
    <span :class="iconClass" @click="show"></span>
    <mt-popup class="popup-border-radius" v-model="popvisible">
      <div class="popupPrompt">
        <div class="tt">{{ text.tt }}</div>
        <div class="info">{{ text.info }}</div>
        <span class="zhk-alert_close close" @click="close"></span>
      </div>
    </mt-popup>
  </span>
</template>
<script>
import Vue from "vue";
import { Popup } from "mint-ui";
export default {
  name: "memberStoredDataStatistics",
  props: {
    text: {
      type: Object,
      default: { tt: "", info: "" }
    },
    iconClass:{
      type: String,
      default: 'zhk-ts'
    }
  },
  data() {
    return {
      popvisible: false
    };
  },
  methods: {
    show() {
      this.popvisible = true;
    },
    close() {
      this.popvisible = false;
    }
  }
};
</script>
<style lang="scss">
@import "../../style/public";
.popup-border-radius{
  @include remCalc(border-radius, 12);
}
.popupPrompt {
  @include remCalc(width, 540);
  @include remCalc(border-radius, 12);
  background: #ffffff;
  @include remCalc(padding, 40);
  text-align: left;
  position: relative;
  .tt {
    font-family: PingFangSC-Medium;
    @include remCalc(font-size, 32);
    @include remCalc(margin-bottom, 20);
    color: #333333;
    line-height: 1;
  }
  .info {
    font-family: PingFangSC-Regular;
    @include remCalc(font-size, 24);
    @include remCalc(line-height, 30);
    color: #666666;
  }
  .close {
    position: absolute;
    @include remCalc(top, 0);
    @include remCalc(right, 0);
    @include remCalc(padding, 20);
    @include remCalc(font-size, 20);
  }
}
</style>
